<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>商品列表</span>
            </div>
        </template>
        <div>
            <el-input v-model="page.ename" style="width: 240px;margin-right:10px;" placeholder="请输入商品名称"
                :prefix-icon="Search" />
            <el-button type="primary" @click="reload">查询</el-button>
        </div>
        <el-divider></el-divider>
        <el-button type="primary" @click="dialogVisable = true" :icon="Plus">添加</el-button>
        <el-button type="danger" @click="delByIds" :icon="Plus">批量删除</el-button>
        <el-table :data="tableData" row-key="eid" stripe style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="编号" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="subtitle" label="子标题" />
            <el-table-column prop="mainPic" label="图片" />
            <el-table-column prop="status" label="状态">
                <template #default="scope">
                    <el-button v-if="scope.row.status == 'ON'" type="success">上架</el-button>
                    <el-button v-if="scope.row.status == 'OFF'" type="warning">下架</el-button>
                    <el-button v-if="scope.row.status == 'DELETED'" type="danger">已删除</el-button>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="180px">
                <template #default="scope">
                    <el-button-group>
                        <el-button size="small" type="warning" :icon="Edit" @click="editRow(scope.row)">修改</el-button>

                        <el-popconfirm title="确认删除当前数据吗?" @confirm="deleteRow(scope.row.eid)">
                            <template #reference>
                                <el-button size="small" type="danger" :icon="Delete">删除</el-button>
                            </template>
                        </el-popconfirm>
                        <el-button size="small" type="warning" :icon="Edit" @click="editRow(scope.row)">详情</el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
        <el-divider></el-divider>
        <el-pagination v-model:current-page="page.page" :page-size="page.size" :total="count" :page-count="totalPage"
            layout="total, sizes, prev, pager, next, jumper" :page-sizes="[5, 10, 20, 50]"
            @size-change="handleSizeChange" @current-change="reload" class="pagination-container" />
    </el-card>

    <!-- 添加页面弹出层 -->
    <el-dialog title="员工添加页面" v-model='dialogVisable'>
        <el-form :model="empForm" label-width="120px">

            <el-form-item label="商品名称">
                <el-input v-model="empForm.name" placeholder="请输入商品名称" />
            </el-form-item>

            <el-form-item label="子标题">
                <el-input v-model="empForm.subtitle" placeholder="请输入子标题" />
            </el-form-item>

            <el-form-item label="图片">
                <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    :show-file-list="false" >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>

            <el-form-item label="状态">
                <el-select v-model="empForm.status" placeholder="请选择">
                    <el-option label="ON" value="ON" />
                    <el-option label="OFF" value="OFF" />
                    <el-option label="DELETED" value="DELETED" />
                </el-select>
            </el-form-item>

            <el-form-item label="详情">
                <div style="border: 1px solid #ccc">
                    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                        :mode="mode" />
                    <Editor style="height: 500px; overflow-y: hidden;" v-model="empForm.detailHtml"
                        :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
                </div>
            </el-form-item>



            <el-form-item>
                <el-button type="primary" @click="onSubmit">创建</el-button>
                <el-button @click="dialogClose">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 修改页面弹出层 -->
    <el-drawer title="员工修改页面" v-model='dialogVisableModify' direction='rtl'>
        <el-form :model="empForm" label-width="120px">
            <el-form-item label="编号">
                <el-input v-model="empForm.eid" placeholder="请输入编号" type="number" readonly />
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="empForm.ename" placeholder="请输入姓名" />
            </el-form-item>

            <el-form-item label="性别">
                <el-switch v-model="empForm.sex" :active-icon="Male" :inactive-icon="Female" />
            </el-form-item>

            <el-form-item label="学历">
                <el-select v-model="empForm.edu" placeholder="请选择学历">
                    <el-option label="初中" value="初中" />
                    <el-option label="高中" value="高中" />
                    <el-option label="大学" value="大学" />
                    <el-option label="研究生" value="研究生" />
                    <el-option label="博士" value="博士" />
                </el-select>
            </el-form-item>

            <el-form-item label="入职日期">
                <el-date-picker v-model="empForm.employed" type="date" placeholder="入职日期" clearable />
            </el-form-item>

            <el-form-item label="出生日期">
                <el-date-picker v-model="empForm.birthday" type="date" placeholder="出生日期" clearable />
            </el-form-item>

            <el-form-item label="薪水">
                <el-input v-model="empForm.salary" placeholder="请输入薪水" type="number" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="modifyData">保存</el-button>
                <el-button @click="dialogClose">取消</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>

</template>

<script setup>
import { getEmployeeList, delEmp, addProduct, modifyEmployee, delEmps } from '@/api/Product'
import { Select, Compass, Football, Check, Search, Plus, Male, Female } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/UserStore.js'

import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
// const valueHtml = ref('<p></p>')
const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' }

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}

const store = useUserStore();
let dialogVisable = ref(false);
let dialogVisableModify = ref(false);
let eids = ref("");



const handleSelectionChange = (val) => {
    //获取val当中的所有eid
    let ids = val.map(item => item.eid)
    eids.value = ids.join(",");

};

let empForm = ref({
    name: '',
    subtitle: '',
    status: '',
    mainPic: '',
    detailHtml: ''
});

// 重置使用
let empForm1 = ref({
    name: '',
    subtitle: '',
    status: '',
    mainPic: '',
    detailHtml: ''
});

let tableData = ref([]);

/**
 * 获取员工列表
 */
let page = ref({
    page: 1,
    size: 10,
    ename: ''
});

let totalPage = ref(0);
let count = ref(0);

/**
 * 关闭弹出层
 */
const dialogClose = () => {
    dialogVisableModify.value = false;
    dialogVisable.value = false;
    empForm.value = empForm1.value;
}

const delByIds = async () => {
    const rows = await delEmps({ eids: eids.value + "" });
    ElMessage({
        message: rows.msg,
        type: rows.code == 200 ? 'success' : 'warning'
    })
    reload();
}

const handleSizeChange = (val) => {
    page.value.size = val
    reload()
}

/**
 * 修改操作
 */
const editRow = async (row) => {
    dialogVisableModify.value = true;
    empForm.value = row;

}

const modifyData = async () => {
    empForm.value.sex = empForm.value.sex == true ? '男' : '女';
    const rows = await modifyEmployee(empForm.value);
    ElMessage({
        message: rows.msg,
        type: rows.code == 200 ? 'success' : 'warning'
    })
    dialogClose();
    reload();
}

/**
 * 添加功能按钮
 */
const onSubmit = async () => {
    //先做性别 处理
    console.log(empForm.value);

    const rows = await addProduct(empForm.value);
    ElMessage({
        message: rows.msg,
        type: rows.code == 200 ? 'success' : 'warning'
    })
    dialogClose();
    reload();
}

/**
 * 删除
 */
const deleteRow = async (eid) => {
    const rows = await delEmp(eid);
    reload();
    ElMessage({
        message: rows.msg,
        type: rows.code == 200 ? 'success' : 'warning',
    })
};

/**
 * 加载表格数据 
 */
async function initData() {
    const data = await getEmployeeList(page.value);
    totalPage.value = data.data.totalPage;
    count.value = data.data.count;
    tableData.value = data.data.rows;
}

/**
 * 分页点击事件
 */
function reload() {
    initData();
}

/**
 * 挂载
 */
onMounted(async () => {
    initData();
});
</script>

<style scoped>
.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    padding: 12px 16px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* 调整分页按钮间距 */
.el-pagination {
    --el-pagination-button-width: 32px;
    --el-pagination-button-height: 32px;
}

/* 当前页样式 */
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
    margin: 0 4px;
    border-radius: 4px;
}

.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
    background-color: var(--el-color-primary);
    color: white;
}

/* 悬停效果 */
.el-pagination.is-background .el-pager li:not(.is-disabled):hover {
    color: var(--el-color-primary);
}

/* 调整输入框样式 */
.el-pagination__jump {
    margin-left: 10px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>


